import React, { useState } from "react";
import { UserOutlined, SafetyOutlined } from "@ant-design/icons";

import { Button, Form, Input, Row, Col, Modal, Alert, Select } from "antd";
import { useTranslation } from "react-i18next";

export default function SetChangePhone(props) {
  const { hideModal, open, titleflag } = props;
  console.log("titleflag", titleflag);
  const { t } = useTranslation();
  const [inputData, setInputData] = useState("1");
  const [buttonData, setButtonData] = useState("1");
  const [buttonFlag, setButtonFlag] = useState(true);
  const [Data, setData] = useState("");

  // 手机号倒计时
  var countdown = 60;
  var value;
  function settime() {
    if (countdown === -1) {
      countdown = 60;
      return;
    } else {
      value = "重新发送(" + countdown + ")";
      countdown--;
      if (countdown > 0) {
        setButtonFlag(false);
      }
      setData(value);
      if (countdown === 0) {
        setButtonFlag(true);
        setButtonData("3");
      }
    }

    setTimeout(function () {
      settime();
    }, 1000);
  }

  const { Option } = Select;

  // 点击验证数据状态更改
  const inputStatus = {
    1: `${t("login.PhoneNumber")}`,
    2: "请输入验证码",
  };
  const buttonStatus = {
    1: `${t("login.GetVerificationCode")}`,
    2: Data,
    3: "重新发送",
  };

  const messageDom = () => {
    if (titleflag === 1) {
      return <span>{t("message.PasswordMust")}</span>;
    } else {
      return <span>{t("message.PasswordMusttwo")}</span>;
    }
  };

  const titleDom = () => {
    if (titleflag === 1) {
      return <span>{t("message.Modifymobilenumber")}</span>;
    } else {
      return <span>{t("message.Modifymailbox")}</span>;
    }
  };
  return (
    <div>
      <Modal
        title={titleDom()}
        open={open}
        onOk={hideModal}
        onCancel={hideModal}
        // okText="确认"
        okText={t("buttons.confirm")}
        // cancelText="取消"
        cancelText={t("buttons.cancel")}
      >
        <Alert
          style={{ textAlign: "left", border: "none", marginBottom: "20px" }}
          message={messageDom()}
          // message={
          //   titleflag == 1
          //     ? "密码必须为10-15位且包含字母与数字"
          //     : "密码必须为6位数字"
          // }
          type="warning"
          showIcon
        />
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
        >
          <Form.Item
            name="gender"
            prefix={<SafetyOutlined className="site-form-item-icon" />}
            validateStatus="error"
            help="短信验证只支持大陆手机"
          >
            <Select
              style={{ textAlign: "left" }}
              defaultValue="phone"
              placeholder={t("login.SelectVerificationMethod")}
              allowClear
            >
              <Option value="phone">{t("login.SMSverification")}</Option>
              <Option value="email">{t("login.Mailboxverification")}</Option>
            </Select>
          </Form.Item>

          <Form.Item style={{ marginBottom: "0px" }}>
            <Row gutter={(10, 10)}>
              <Col span={18}>
                <Form.Item name="captcha">
                  <Input
                    prefix={<SafetyOutlined className="site-form-item-icon" />}
                    placeholder={inputStatus[inputData]}
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                {buttonFlag ? (
                  <Button
                    onClick={() => {
                      setInputData("2");
                      setButtonData("2");
                      settime();
                    }}
                  >
                    {buttonStatus[buttonData]}
                  </Button>
                ) : (
                  <Button disabled>{buttonStatus[buttonData]}</Button>
                )}
              </Col>
            </Row>
          </Form.Item>

          <Form.Item name="phonenumber">
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={t("login.PhoneNumber")}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
